<template>
  <div class="main">
    <van-nav-bar 
        v-if="this.$route.params.id>55"
        title="商品评论"
        left-text="返回"
        fixed
        left-arrow
        @click-left="$router.back()"/>
    <div class="commenttitle">
            <h3>提交评论</h3>
            <span style="font-size: 16px;"><a @click="$router.back()">返回</a></span>
        </div>
        <div class="comment">
            <textarea v-model.trim="content" placeholder="请输入评论内容..."  id="commenttxt">
            </textarea>
            <van-button type="info" @click="submitFn" size="large">发表</van-button>
        </div>

        <div class="commenttitle">
            <h3>评论列表</h3>
            <span>{{total}}条评论</span>
        </div>
        <div class="commentlist">
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad">
    
   <div class="outwarp" v-for="(item,index) in commentList" :key="index">
                <div class="content">{{item.content}}</div>
                <div class="username">{{item.user_name}}</div>
                <div class="addtime">{{item.add_time | dateFormat}}</div>
            </div>

  </van-list>
  </van-pull-refresh>
    <div class="box"></div>        
             <!-- <van-button icon-position='' type="info"  size="large">加载更多</van-button> -->
        </div>
  </div>
</template>

<script>
import { getNewsCommentAPI, publishCommentAPI } from "@/api/recommend"
import {dateFormat} from "@/utils/filter"
export default {
    filters:{
        dateFormat
    },
 data () {
     return {
         content:'',  //获取文本域的内容
         commentList:[],
         total:'',   //评论列表总条数
          loading: false,
         finished: false,
         refreshing: false,
         pageIndex:1,
         id:this.articleId | this.$route.params.id
     }
 },
 props:{
    articleId:String   //接收父组件传递过来的文章id
 },
 created () {
     this.getCommentList();
    
 },
 methods: {
     
     //获取评论列表数据
    async getCommentList(){
    //     if(!this.articleId){   
    //         this.articleId=this.$route.params.id
    //  }
      const res=await getNewsCommentAPI(this.id,{pageindex:this.pageIndex});
     //没有评论了就将finfished设为true
     if(res.data.message.length===0){
         this.finished=true;
         return;
     }
    //  console.log(res.data.message);
     console.log('当前页'+this.pageIndex,res);
     this.commentList.push(...res.data.message);
     this.total=res.data.total;
     //隐藏加载中的提示
     this.loading=false;
    },
    //滑动快触底时触发
    onLoad(){
      this.pageIndex++;
      this.getCommentList();
      this.loading=false;
    },
     //下拉刷新评论列表
  async  onRefresh(){
        //重置页码
        this.pageIndex=1;
        //清空评论列表的数据
        this.commentList=[];
        //隐藏没有更多提示，
        this.finished=false;
        //重新加载数据
        this.loading=true;
        await this.getCommentList();
        this.refreshing=false;
    },
        //发表评论
  async submitFn(){
      if(this.content===''){
        return this.$toast.fail('请输入评论内容');
      }
        const res2=await publishCommentAPI(this.id,this.content);
        console.log(res2);
        console.log(this.content);
        if(res2.data.status===0){
            // this.$toast.success(res2.data.message)
            this.$toast.success(res2.data.message);
        }else{
            this.$toast.fail(res2.data.message);
        }
        this.onRefresh()
        // this.getCommentList();
        this.content=''
    }
 }
}
</script>

<style lang="less" scoped>
.commenttitle{
        height: 60px;
       display: flex;
       justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #c8c8cd;
        padding:10px 0 10px 10px;
    }
    
    .commenttitle h3{
        width: 200px;
        
    }
    .commenttitle span{
        margin-right: 10px;
        line-height: 40px;
        font-size:12px;
        color:#26a2ff;
    }
    #commenttxt{
        display: block;
        width:100%;
        height: 100px;
        margin-bottom: 10px;
    }
    .comment{
        padding:10px;
        border-bottom: 1px solid #c8c8cd;
    }
    .commentlist{
        padding: 10px;

    }
    .commentlist .outwarp{
        font-size:14px;
    }
    .commentlist .outwarp:nth-child(1n + 2){
        clear: both;
        padding-top: 10px;
        border-top: 1px solid #c8c8cd;
    }
    .commentlist .content{
        margin-bottom: 10px;
        color:#5c5c5c;
    }
    .commentlist .username{
        width: 50%;
        float: left;
        color:#0094ff;
        padding:10px 0 10px 0 ;
    }
    .commentlist .addtime{
        width: 50%;
        float: right;
        color:#5c5c5c;
        padding:10px 0 10px 0 ;
        text-indent: 7.4em;
    }
    .box{
        height: 100px;
    }
</style>